<template>
	<view class="container">
		<!-- <view id="olMap" class="olMap">
		</view> -->
		<web-view src="/hybrid/html/openlayers.html"></web-view>
	</view>
</template>

<script>
</script>
<!-- <script module="ol" lang="renderjs">
	import ol from '@/hybrid/html/js/ol.js'
	export default {
		data() {
			return {
				map: null,
				src: 'http://81.68.77.230/map.html'
			}
		},
		mounted() {
			// if (typeof window.ol === 'function') {
			// 	this.initAmap()
			// } else {
			// 	// 动态引入较大类库避免影响页面展示
			// 	const script = document.createElement('script')
			// 	script.src = 'https://cdn.bootcdn.net/ajax/libs/ol/4.6.5/ol-debug.js'
			// 	script.onload = this.initAmap.bind(this)
			// 	document.head.appendChild(script)
			// }
			 var map = new ol.Map({
			        target: 'olMap',
			        layers: [
			          new ol.layer.Tile({
			            source: new ol.source.OSM()
			          })
			        ],
			        view: new ol.View({
			          center: ol.proj.fromLonLat([37.41, 8.82]),
			          zoom: 4
			        })
			      });
		},
		methods: {
			initAmap() {
				this.map = new ol.Map({
					layers: [
						new ol.layer.Tile({
							source: new ol.source.OSM()
						})
					],
					target: "olMap",
					view: new ol.View({
						zoom: 18,
						center: [114, 25],
						projection: "EPSG:4326"
					})
				})
			}
		},
	}
</script>

<style>
	@import "@/hybrid/html/css/ol.css";
	.olMap {
		height: 1200rpx;
	}
</style>
 -->
